<template>
  <div class="home">
   <el-link class="link" icon="el-icon-download" type="primary" @click="save">下载图片</el-link>
    <div id="tui-image-editor" class="drawing-container"></div> 
  </div>
</template>
<script>
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
import ImageEditor from "tui-image-editor";

import {
  base64ToFile,
  fileLocalDownLoad,
  // rafThrottle,
} from "@/plugins/file-util";

export default {
  data() {
    return {
      instance: null,
      url: "",
      pName: "",
    };
  },
  mounted() {
    this.init();
  },
  created() {
    this.getPhoto();
  },
  methods: {
    init() {
      const locale_zh = {
        ZoomIn: "放大",
        ZoomOut: "缩小",
        Hand: "手掌",
        History: "历史",
        Resize: "调整宽高",
        Crop: "裁剪",
        DeleteAll: "全部删除",
        Delete: "删除",
        Undo: "撤销",
        Redo: "反撤销",
        Reset: "重置",
        Flip: "镜像",
        Rotate: "旋转",
        Draw: "画",
        Shape: "形状标注",
        Icon: "图标标注",
        Text: "文字标注",
        Mask: "遮罩",
        Filter: "滤镜",
        Bold: "加粗",
        Italic: "斜体",
        Underline: "下划线",
        Left: "左对齐",
        Center: "居中",
        Right: "右对齐",
        Color: "颜色",
        "Text size": "字体大小",
        Custom: "自定义",
        Square: "正方形",
        Apply: "应用",
        Cancel: "取消",
        "Flip X": "X 轴",
        "Flip Y": "Y 轴",
        Range: "区间",
        Stroke: "描边",
        Fill: "填充",
        Circle: "圆",
        Triangle: "三角",
        Rectangle: "矩形",
        Free: "曲线",
        Straight: "直线",
        Arrow: "箭头",
        "Arrow-2": "箭头2",
        "Arrow-3": "箭头3",
        "Star-1": "星星1",
        "Star-2": "星星2",
        Polygon: "多边形",
        Location: "定位",
        Heart: "心形",
        Bubble: "气泡",
        "Custom icon": "自定义图标",
        "Load Mask Image": "加载蒙层图片",
        Grayscale: "灰度",
        Blur: "模糊",
        Sharpen: "锐化",
        Emboss: "浮雕",
        "Remove White": "除去白色",
        Distance: "距离",
        Brightness: "亮度",
        Noise: "噪音",
        "Color Filter": "彩色滤镜",
        Sepia: "棕色",
        Sepia2: "棕色2",
        Invert: "负片",
        Pixelate: "像素化",
        Threshold: "阈值",
        Tint: "色调",
        Multiply: "正片叠底",
        Blend: "混合色",
        Width: "宽度",
        Height: "高度",
        "Lock Aspect Ratio": "锁定宽高比例",
      };
      const customTheme = {
        "common.bi.image":
          "http://rxk4fakas.hn-bkt.clouddn.com/9974c829530b49289339672ac727f63b.png", // 左上角logo图片
        "common.bisize.width": "110px",
        "common.bisize.height": "80px",
        "common.backgroundImage": "",
        "common.backgroundColor": "",
        "common.border": "1px solid #333",

        // header
        "header.backgroundImage": "none",
        "header.backgroundColor": "#607d8b00",
        "header.bisize.height": "50px",
        "header.border": "50px",

        // load button
        "loadButton.backgroundColor": "#fff",
        "loadButton.border": "1px solid #ddd",
        "loadButton.color": "#222",
        "loadButton.fontFamily": "NotoSans, sans-serif",
        "loadButton.fontSize": "12px",
        "loadButton.display": "none", // 隐藏

        // download button
        "downloadButton.backgroundColor": "#1ec9ef",
        "downloadButton.border": "1px #fdba3b",
        "downloadButton.color": "#fff",
        "downloadButton.fontFamily": "NotoSans, sans-serif",
        "downloadButton.fontSize": "10px",
        "downloadButton.display": "none", // 隐藏

        // icons default
        "menu.normalIcon.color": "#8a8a8a",
        "menu.activeIcon.color": "#555555",
        "menu.disabledIcon.color": "#ccc",
        "menu.hoverIcon.color": "#e9e9e9",
        "submenu.normalIcon.color": "#8a8a8a",
        "submenu.activeIcon.color": "#e9e9e9",

        "menu.iconSize.width": "20px",
        "menu.iconSize.height": "20px",
        "submenu.iconSize.width": "20px",
        "submenu.iconSize.height": "20px",

        // submenu primary color
        "submenu.backgroundColor": "#4d559eeb",
        "submenu.partition.color": "#858585",

        // submenu labels
        "submenu.normalLabel.color": "#858585",
        "submenu.normalLabel.fontWeight": "lighter",
        "submenu.activeLabel.color": "#fff",
        "submenu.activeLabel.fontWeight": "lighter",

        // checkbox style
        "checkbox.border": "1px solid #ccc",
        "checkbox.backgroundColor": "#fff",

        // rango style
        "range.pointer.color": "#fff",
        "range.bar.color": "#666",
        "range.subbar.color": "#d1d1d1",

        "range.disabledPointer.color": "#414141",
        "range.disabledBar.color": "#282828",
        "range.disabledSubbar.color": "#414141",

        "range.value.color": "#fff",
        "range.value.fontWeight": "lighter",
        "range.value.fontSize": "11px",
        "range.value.border": "1px solid #353535",
        "range.value.backgroundColor": "#151515",
        "range.title.color": "#fff",
        "range.title.fontWeight": "lighter",

        // colorpicker style
        "colorpicker.button.border": "1px  #1e1e1e",
        "colorpicker.title.color": "#fff",
      };
      this.instance = new ImageEditor(
        document.querySelector("#tui-image-editor"),
        {
          usageStatistics: false,
          includeUI: {
            loadImage: {
              path: this.url,
              name: this.pName,
            },
            initMenu: "draw", // 默认打开的菜单项
            menuBarPosition: "left", // 菜单所在的位置
            locale: locale_zh, // 本地化语言为中文
            theme: customTheme, // 自定义样式
          },
          cssMaxWidth: 1000, // canvas 最大宽度
          cssMaxHeight: 410, // canvas 最大高度
        }
      );
      document.getElementsByClassName("tui-image-editor-main")[0].style.top =
        "0px"; // 图片距顶部工具栏的距离
      document.getElementsByClassName(
        "tui-image-editor-controls"
      )[0].style.backgroundColor = "#324157 ";
      /* 对一些不需要的按钮进行样式隐藏*/
      document.querySelector('[tooltip-content="删除"]').style.display = "none";
      document.querySelector(
        ".tui-image-editor-container .tui-image-editor-help-menu.right"
      ).style.height = "140px";
    },
    getPhoto() {
      this.url = this.$route.params.url;
      this.pName = this.$route.params.pName;
    },
    save() {
      // blob 转换成 File 对象
      // let blob = base64ToFile(this.instance.toDataURL(), "图片");
      // let file = new window.File([blob], blob.name, { type: blob.type });
      // let form = new FormData();
      // form.append("file", file);
      // console.log(file);
      // let data = form.get("file");
      // console.log(data);
      // const reader = new FileReader();
      // reader.readAsDataURL(file);
      // console.log(reader.result)
      // reader.onload = () => {
      //   this.showBtn = false;
      //   this.showProgress = true;
      //   this.$axios
      //     .post("photo/upload", {
      //       file: data,
      //       // uId: window.sessionStorage.getItem("uId")
      //     })
      //     .then((res) => {
      //       console.log(res.data);
      //       if (res.data.code === 0) {
      //         console.log("成功");
      //       }
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
      // };
      const base64String = this.instance.toDataURL();
      const file = base64ToFile(base64String, this.pName);
      fileLocalDownLoad(file, this.pName);
    },
  },
};
</script>

<style lang="less" scoped>
.home{
  background-color: #607d8b00;
  width: 100%;
  height: 450px;
  border-radius: 10px;
.link{
  float:right;
}
.drawing-container {
  background-color: #607d8b00;
  width: 100%;
  height: 90%;
  border-radius: 10px;
}}
</style>
